<template>
  <div>
    <el-dialog
      :title="isDish?'新增菜品分类':'新增套餐分类'"
      :visible.sync="dialogVisible"
      width="400px"
      :before-close="dialogBeforeClose"
    >
      <el-form ref="addData" :model="addData" label-width="80px">
        <el-form-item label="分类名称" prop="name" label-width="100">
          <el-input v-model="addData.name" :placeholder="isDish?'请输入菜品名称':'请输入套餐名称'" />
        </el-form-item>
        <el-form-item label="排序" prop="sort" label-width="100">
          <el-input v-model="addData.sort" :placeholder="'请输入排序序列'" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogBeforeClose">取 消</el-button>
        <el-button type="primary" @click="submitData('addData')">保 存</el-button>
        <el-button v-if="!isEdit" type="primary" @click="batchSubmitData('addData')">保存并继续添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils/myUtil'
import { addCategory, editCategory } from '@/api/category'
import { EventBus } from '@/utils/eventBus'
export default {
  name: 'AddSortDialog',
  props: {
    isDish: {
      type: Boolean,
      require: true,
      default: true
    },
    show: {
      type: Boolean,
      require: true,
      default: true
    },
    isEdit: {
      type: Boolean,
      require: true,
      default: false
    },
    detailData: {
      type: Object,
      require: false,
      default() {
        return {}
      }
    }
  },
  data() {
    const validName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('分类名称不能为空'))
      } else if (value.length <= 20 && value.length > 1) {
        callback()
      } else {
        callback(new Error('名称长度只能为1-20'))
      }
    }
    const validSort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('排序不能为空'))
      } else if (/\d+/.test(value)) {
        callback()
      } else {
        callback(new Error('排序只能输入数字'))
      }
    }
    return {
      addData: {
        name: '',
        sort: 1
      },
      rules: {
        name: { validator: validName, trigger: blur },
        sort: { validator: validSort, trigger: blur }
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  created() {
    console.log(this.dialogVisible)
    if (this.isEdit) {
      this.addData = deepClone(this.detailData)
    }
  },
  methods: {
    dialogBeforeClose() {
      this.dialogVisible = false
    },
    async handelSubmit() {
      if (this.isEdit) {
        const { code } = await editCategory(this.addData)
        if (code) {
          this.$message.success('修改成功')
        }
      } else {
        const { code } = await addCategory(this.addData)
        if (code) {
          this.$message.success('添加成功')
        }
      }
    },
    async submitData(formName) {
      this.$refs[formName].validate((valid) => {
        this.handelSubmit()
        this.dialogBeforeClose()
        EventBus.$emit('retchCategoryData')
      })
    },
    batchSubmitData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handelSubmit()
          this.$refs[formName].resetFields()
        }
      }
      )
    }
  }
}
</script>

<style>

</style>
